<template>
  <div>

    <Form :label-width="labelWidth" label-position="right" style="border: 1px solid #dcdee2;" class="form">
      <div style="padding: 10px;">
        <template>
          <Row>
            <Col span="8" style="padding-left: 10px;">
              <Button style="padding-left: 10px" type="primary" @click="openTagAlert">添加标签</Button>
            </Col>
          </Row>
          <Row style="padding: 10px">
            <Table border :columns="tagColumnsAll" :data="tagDatasAll" width="100%" style="padding:0px 0 300px 0;">
              <!--申请原因-->
              <template slot-scope="{ row, index }" slot="applyDom">
                <Input v-model="tagDatasAll[index].apply" placeholder="请输入申请原因" />
              </template>
              <!--开始账期-->
              <template slot-scope="{ row, index }" slot="startTimeDom">
                <DatePicker type="date" placeholder="请选择开始账期" v-model="tagDatasAll[index].startTime"/>
              </template>
              <!--结束账期-->
              <template slot-scope="{ row, index }" slot="endTimeDom">
                <DatePicker type="date" placeholder="请选择结束账期" v-model="tagDatasAll[index].endTime"/>
              </template>
              <!--订购区域-->
              <template slot-scope="{ row, index }" slot="orderAreaDom">
                <Select v-model="tagDatasAll[index].orderArea" multiple>
                  <Option v-for="item in cityList" :value="item.provName" :key="item.provName">{{ item.provName }}</Option>
                </Select>
              </template>
              <template slot-scope="{ row, index }" slot="tagsDom">
                <Tag>{{row.tag.propName}}</Tag>
              </template>

               <!-- 添加删除按钮  删除同一列数据 和 同步删除添加标签里的数组数据 -->
              <template slot-scope="{ row, index }" slot="delbutton">
                <div style="display: flex; align-content: center" >
                  <Button
                    type="error"
                    label="small"
                    style="display: flex; align-content: center;line-height: 30px;"
                    @click="delline(row.tag.anaObjId, row.tag.dateType,row,index)"
                  >
                    删除
                  </Button>
                  <!-- <Button
                    class="btn_pointer"
                    type="warning"
                    label="small"
                    @click="alter(row)"
                  >
                  确认
                  </Button> -->
                </div>
              </template>

              <!-- 用户类型 -->
              <template slot-scope="{ row }" slot="usertype">
                <!-- {{row}} -->
                <Tag>
                  <template v-for="ob in objectOption">
                    <!-- {label:'用户',value:'1'}, -->
                    <!-- {{ row.tag.anaObjId }} -->
                    {{ ob.value === row.tag.anaObjId ? ob.label : "" }}
                  </template>
                </Tag>
              </template>
              <!-- 时间类型 -->
              <template slot-scope="{ row }" slot="updated">
                <Tag>
                  <template v-for="time in timeOption">
                    <!-- {{ time.label }} -->
                    <!-- {label:'日',value:'D'} -->
                    {{ time.value === row.tag.dateType ? time.label : "" }}
                  </template>
                </Tag>
              </template>

            </Table>
          </Row>
        </template>

      </div>
    </Form>

    <Modal id="tagModel" v-model="showTagInfo" width="96%" @on-ok="cardSave">
      <span slot="header" style="font-size: 22px; font-weight: bold;">添加标签</span>
      <tagInfo :tagInfoData="tagInfoData" ref="tags"/>
    </Modal>
  </div>
</template>

<script>
  import {cityList} from "../../../../utils/dataInfo/province";
  import tagInfo from "./tag_info";
import { timeOption, objectOption } from "../../../../utils/dataInfo/tagInfo";


  export default {
    name: "tag_model",
    components: {tagInfo},
    data() {
      return {
          // 点击删除，显示对话框
      isDelModal: false,
      objectOption: objectOption,
      timeOption: timeOption,
        //规则
        validate: {
          orderArea: [
            {required: true, message: '订购区域不能为空', trigger: 'blur'},
          ]
        },
        // 申请原因、开始账期、结束账期、订购区域
        tagColumnsAll: [
          {
            title: '标签名称',
            key: 'tag',
            slot: 'tagsDom',
            minWidth: 200
          },
          {
          title: "用户类型",
          key: "",
          slot: "usertype",
          minWidth: 100,
        },
        {
          title: "时间类型",
          key: "",
          slot: "updated",
          minWidth: 100,
        },
          {
          title: '申请原因',
          key: 'apply',
          slot: 'applyDom',
          width: 200,
        },
          {
            title: '开始账期',
            key: 'startTime',
            slot: 'startTimeDom',
            width: 200,
          },
          {
            title: '结束账期',
            key: 'endTime',
            slot: 'endTimeDom',
            minWidth: 200
          }, {
            title: '订购区域',
            key: 'orderArea',
            slot: 'orderAreaDom',
            minWidth: 200
          }, 
          {
          title: "修改标签",
          key: "",
          slot: "delbutton",
          minWidth: 200,
        },
        ],
        tagDatasAll: [],
        //表单
        tagInfo: {
          startDate: '',
          endDate: '',
          orderArea: [],
        },
        //总标签
        allTags: [],
        cityList: cityList,
        labelWidth: 140,
        showTagInfo: false,
        tagInfoData:[]
      }
    },
    created() {

    },
    methods: {
      alter(row){
        console.log(row)
         console.log('不完善',!row.apply,!row.endTime,!row.orderArea.length,!row.startTime)
        if(!row.apply||!row.endTime||!row.orderArea||!row.startTime){
          console.log('不完善',!row.apply,)
          this.$Message.warning('        请把所有信息填写完整！       ');
        }
      },
      //打开弹框
      openTagAlert() {
        this.showTagInfo = true;

      },
      cancelTagAlert() {
        this.showTagInfo = false
      },
      // 确定按钮
      cardSave() {
        this.allTags = this.$refs.tags.returnValue();
        this.tagDatasAll = this.getData(this.allTags);
      },
      getData(list) {
        let resultList = [];
        list.forEach(val => {
          let item = {
            apply: '',
            startTime: '',
            endTime: '',
            orderArea: '',
            tag: val
          };
          resultList.push(item);
        });
        return resultList;
      },
      // 点击删除  获取标签的数据  删除
      delline(anaObjId, dateType,item,index) {
        console.log(this.tagDatasAll,index);
        // let index = 0
        // let a = this.$refs.tags.tagList.filter(item => {
        //   if (item.dateType === dateType && item.anaObjId === anaObjId) {
        //     return index
        //   }
        //   index++
        // })
        let that = this;
        that.$Modal.confirm({
          title: '删除',
          content: '是否要删除当前项？',
          okText: '删除',
          loading: true,
          closable: true,
          // 点击删除后的回调
          onOk: () => {
         
            // for (let index = 0; index < this.$refs.tags.tagList.length; index++) {
            //   if (
            //     this.$refs.tags.tagList[index].anaObjId === anaObjId &&
            //     this.$refs.tags.tagList[index].dateType === dateType
            //   ) {
            //     this.$refs.tags.delete(index);
            //     this.tagDatasAll.splice(index, 1);

            //     // 删除后关闭loading
            //     that.$Modal.remove();
            //     // return;
            //   }
            // }
          this.$refs.tags.cardChange(item.tag)//去除选中状态
          this.tagDatasAll.splice(index,1)
          //   that.cardSave()
            that.$Modal.remove();
          //     console.log(this.tagDatasAll);
          }
        })
       
      },
    }
  }
</script>

<style scoped>
 #tagModel >>> .ivu-modal {
    top: 20px !important;
  }
  .tabData >>> .ivu-table-wrapper {
  overflow: visible;
}
.btn_pointer {
  display: flex;
  align-content: center;
  justify-content: space-between;
  line-height: 30px;
  margin-left: 20px;
}
</style>
